<style scoped>
.img-face {
  max-width: 200px;
  max-height: 200px;
  padding: 10px;
  cursor: pointer;
}
.divAmount{
  padding-left: 10px;
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
.amount1{
  color: #19be6b;
}
.amount1{
  color: #19be6b;
}.amount2{
  color: #ed4014
}
</style>
<template>
  <div>
    <Card style="margin-bottom: 10px">
      <Form inline class="form-search">
        <FormItem>
          <RadioGroup
            v-model="type"
            @on-change="typeChange"
            type="button"
            button-style="solid"
          >
            <Radio :label="-1">全部</Radio>
            <Radio :label="1">收入</Radio>
            <Radio :label="2">支出</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <DatePicker
            style="width: 150px"
            type="date"
            format="yyyy年MM月dd日"
            placeholder="开始日期"
            :clearable="false"
            v-model="sdate"
          ></DatePicker>
        </FormItem>
        <FormItem>
          <DatePicker
            style="width: 150px"
            type="date"
            format="yyyy年MM月dd日"
            placeholder="结束日期"
            :clearable="false"
            v-model="edate"
          ></DatePicker>
        </FormItem>
        <FormItem>   </FormItem>
        <FormItem>
          <Input
            v-model="keyword"
            placeholder="项目/备注"
            style="width: 200px"
          />
        </FormItem>

        <FormItem>
          <Button
            type="primary"
            @click="
              page = 1;
              SearchFinance();
            "
            icon="md-search"
            >查询</Button
          >
        </FormItem>
        <FormItem>
          <Button type="primary" @click="AddData()" icon="md-add"
            >记一笔</Button
          >
        </FormItem>
      </Form>
    </Card>
   <Row :gutter="16">
        <Col span="4" v-for="item in amountList" :key="item.FinanceItemType">
            <div class="divAmount">{{item.FinanceItemType==1?'收入':'支出'}}¥: <span :class="item.FinanceItemType==1?'amount1':'amount2'"> {{item.Amount}}</span></div>
        </Col>

    </Row>
    <Table
      ref="table"
      style="margin-bottom: 10px"
      border
      :loading="loadingTable"
      :columns="tableTitle"
      :data="tableData"
      :height="tableHeight"
    ></Table>
    <Page
      :total="total"
      :current="page"
      :page-size="size"
      :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]"
      @on-change="
        (s) => {
          page = s;
          SearchFinance();
        }
      "
      @on-page-size-change="
        (p) => {
          size = p;
          page = 1;
          SearchFinance();
        }
      "
      show-total
      show-sizer
    />
    <Modal
      :width="600"
      draggable
      v-model="modalTemp"
      title="记一笔"
      :mask-closable="false"
    >
      <Form
        ref="formValidate"
        :model="tempData"
        :label-width="100"
        :rules="ruleValidate"
      >
        <FormItem label="记账日期" prop="OrderDate">
          <DatePicker
            :clearable="false"
            type="date"
            format="yyyy年MM月dd日"
            v-model="tempData.OrderDate"
          ></DatePicker>
        </FormItem>
        <FormItem label="记账类型" prop="FinanceItemType">
          <RadioGroup
            v-model="tempData.FinanceItemType"
            type="button"
            button-style="solid"
            @on-change="financetypeChange"
          >
            <Radio size="large" :label="1">收入</Radio>
            <Radio size="large" :label="2">支出</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>

          <Tag
          @click.native="getItem(item.Name)"
            v-for="item in financeItems"
            :key="item.Id"
            type="dot"
            closable
             @on-close="DeleteFinanceItem(item.Id)"
            :color="item.Type==1?'success':'error'"
            >{{ item.Name }}</Tag
          >

        </FormItem>
        <FormItem label="记账项目" prop="FinanceItem">
          <Input v-model="tempData.FinanceItem" />
        </FormItem>
        <FormItem label="金额" prop="FinanceAmount">
          <Input type="number" v-model="tempData.FinanceAmount" />
        </FormItem>
        <FormItem label="备注" prop="Remark">
          <Input
            v-model="tempData.Remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalTemp = false">取消</Button>
        <Button type="primary" :loading="loading" @click="SaveFinance"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  SearchFinance,
  SaveFinance,
  DeleteFinance,
  GetFinanceItem,
  DeleteFinanceItem
} from '@/api/finance'
export default {
  name: 'finance',
  data () {
    return {
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 450,
      sdate: '',
      edate: '',
      type: -1,
      keyword: '',
      ruleValidate: {},
      loading: false,
      loadingTable: false,
      tempData: {
        FinanceItemType: 1,
        FinanceItem: ''
      },
      isPrint: 0,
      modalTemp: false,
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 120,
          render: (h, params) => {
            var operateArr = []
            operateArr.push(
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var vm = this
                      vm.tempData = params.row
                      vm.modalTemp = true
                    }
                  }
                },
                '修改'
              )
            )
            operateArr.push(
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.DeleteFinance(params.row.Id)
                    }
                  }
                },
                '删除'
              )
            )

            return h('div', operateArr)
          }
        },
        {
          key: 'OrderDate',
          title: '费用日期',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {},
              this.dayjs(params.row.OrderDate).format('YYYY-MM-DD')
            )
          }
        },
        {
          key: 'OrderNo',
          title: '流水号',
          width: 150,

          align: 'center'
        },

        {
          key: 'FinanceItemType',
          title: '类型',
          width: 80,

          align: 'center'
        },
        {
          key: 'FinanceItem',
          title: '项目',
          width: 150,

          align: 'center'
        },
        {
          key: 'FinanceAmount',
          title: '金额',
          width: 150,
          align: 'center'
        },

        {
          key: 'Remark',
          title: '备注',
          minWidth: 200,
          align: 'center'
        }
      ],
      tableData: [],
      allRoles: [],
      tempRoleIds: [],
      tempDataId: null,
      financeItems: [],
      amountList: []
    }
  },
  computed: {},

  methods: {
    getItem (name) {
      this.tempData.FinanceItem = name
    },
    typeChange () {
      this.page = 1
      this.SearchFinance()
    },
    financetypeChange () {
      this.GetFinanceItem()
    },
    SaveFinance () {
      let vm = this
      if (typeof vm.tempData.OrderDate === 'object') {
        vm.tempData.OrderDate = vm
          .dayjs(vm.tempData.OrderDate)
          .format('YYYY年MM月DD日')
      }
      if (!vm.tempData.OrderDate) {
        this.$Message.warning('日期不能为空')
        return
      }

      SaveFinance(vm.tempData).then((res) => {
        vm.loading = false
        const data = res.data
        if (data.StatusCode == 200) {
          vm.modalTemp = false
          vm.$Message.success({ title: '提示', content: '保存成功' })
          if (vm.isPrint) {
            vm.GetFinanceAndPrint(vm.tempData.Id)
          }
          vm.tempData = {}

          vm.SearchFinance()
        } else {
          vm.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    SearchFinance () {
      let vm = this
      if (typeof vm.sdate === 'object') {
        vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
      }
      if (typeof vm.edate === 'object') {
        vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
      }

      vm.loadingTable = true
      var reqData = {
        sdate: vm.sdate,
        edate: vm.edate,
        page: vm.page,
        size: vm.size,
        type: vm.type,
        keyword: vm.keyword
      }
      SearchFinance(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
          vm.amountList = data.Extras
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    DeleteFinance (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteFinance(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchFinance()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => {}
      })
    },
    DeleteFinanceItem (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteFinanceItem(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.GetFinanceItem()
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => {}
      })
    },
    GetFinanceItem () {
      let vm = this
      GetFinanceItem(vm.tempData.FinanceItemType).then((res) => {
        var data = res.data
        if (data.StatusCode == 200) {
          vm.financeItems = data.Data
        }
      })
    },
    AddData () {
      var vm = this
      vm.tempData = {
        Id: 0,
        FinanceItemType: 1,
        FinanceItem: '',
        OrderDate: vm.dayjs().format('YYYY年MM月DD日')
      }
      vm.GetFinanceItem()
      vm.modalTemp = true
    }
  },
  mounted () {
    this.tableHeight = window.innerHeight - 300
    this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
    this.edate = this.dayjs().format('YYYY年MM月DD日')
    this.SearchFinance()
  }
}
</script>

<style>
</style>
